<template>
	<div class="topic">
		 <div class="flex justify-between">
			<div class="flex-1">
				<div class="question-name flex items-start">
					{{ (props.i || 0) + 1 }}、<span v-if="question.categoryName" class="font-bold">（{{ question.categoryName }}）</span>
					<span v-html="getInlineStrHtml(question.content)"></span>
					<!-- 试题图片 -->
					<template v-if="question.imgs && question.imgs.length > 0">
						<img
						v-for="imgUrl in question.imgs"
						:src="imgUrl"
						class="image"
						>
					</template>
				</div>
				<template v-if="question.choiceDtos && question.choiceDtos.length > 0">
					<!-- 选项 -->
					<div 
					v-if="question.questionsType == 2" 
					class="chooice my-3"
					>
						<div 
						class="item"
						v-for="item in question.choiceDtos"
						:key="item.item"
						>
							<span v-html="item.item"></span>、
							<span v-html="getInlineStrHtml(item.itemContent)"></span>
						</div>
					</div>
					<!-- 计算题每项 -->
					<div 
					v-if="question.questionsType == 3" 
					class="calc-opt my-3 flex items-center"
					>
						<div 
						class="item"
						v-for="(item, index) in question.choiceDtos"
						:key="index"
						>
							<span>({{ index + 1 }})</span>、
							<span v-html="getInlineStrHtml(item.itemContent)"></span>
						</div>
					</div>
				</template>
			</div>
			<div class="flex-shrink-0 flex flex-col">
						<div v-if="question.videoQrCode" class="flex items-center flex-col vedio">
					<div>
						<image :src="question.videoQrCode" class="image"></image>
					</div>
					<div class="f-12">视频讲解</div>
				</div>
			</div>
		</div>
		<!-- 答案 -->
		<div v-if="question.answers.length > 0" class="answers">
			答案：<span v-for="(answer, i) in question.answers" v-html="getInlineStrHtml(answer)" :key="i" class="answer"></span>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import request from '../utils/request';
import { QuestionItem } from '../utils/type';
import { getInlineStrHtml } from '../utils/utils';

const emit = defineEmits(['setCollect']);

const props = defineProps<{
	topic: QuestionItem;
	i?: number
}>();

const question = computed(() => {
	return {
		...props.topic,
		answer: (props.topic.answers || []).reduce((answers: string[], answer) => {
			if (!!answer) {
				answers.push(getInlineStrHtml(answer));
			}
			return answers;
		}, [])
	}
});

// 点击收藏试题
const colletQuestion = async (type: 0 | 1) => {
	await request({
		method: 'POST',
		contentTypeIsForm: false,
		showLoading: {},
		errorToast: true,
		url: '/app/member-paper/questions/save',
		data: {
			questionsId: props.topic.id,
			type
		}
	});
	uni.showToast({
		title: type == 1 ? '收藏成功' : '取消收藏成功',
		icon: "success"
	});
	emit("setCollect", type == 1 ? 0 : 1, props.topic);
};
</script>

<style lang="scss" scoped>
.topic {
	img {
		max-width: 100%;
	}
	.question-name {
		.image {
			max-width: 200rpx;
			margin-left: 20rpx;
		}
	}
	.vedio {
		.image {
			height: 100rpx;
			width: 100rpx;
		}
	}
	.answer-user-3 {
		height: 80rpx;
	}
	.answer-user-4 {
		height: 240rpx;
	}
	.chooice {
		.item {
			margin-left: 50rpx;
			margin-top: 8rpx;
		}
	}
	.answers {
		.answer {
			margin-right: 10rpx;
		}
	}
}
</style>